<template>
  <FigureCard :style="[{ width: state.width, height: state.height }, state.style]">
    <div class="flex-column" style="width: 100%; height: 100%; justify-content: space-between; align-items: flex-start">
      <div class="v-figure-content" :style="{ 'padding-bottom': '4px', height: slotFooter ? 'calc(100% - 20px)' : '100%' }">
        <div class="flex-column hexagon-icon-content">
          <div class="hexagon-icon-box1" :style="{ background: state.fontColor }">
            <v-icon :value="state.icon" :size="state.fontSize + 'px'" class="hexagon-icon" />
          </div>
          <div class="hexagon-icon-box2" :style="{ background: state.fontColor }"></div>
          <div class="hexagon-icon-box3" :style="{ background: state.fontColor }"> </div>
        </div>

        <div class="flex-column figure-center" :style="{ width: 'calc(100% - ' + state.hexagon_w + ')' }">
          <div class="flex-row figure-label-bar" :style="{ height: state.edge_b / 2 + 'px' }">
            <div class="flex-row figure-label">{{ state.label }}</div>
            <div v-show="state.unit" class="flex-column figure-unit">{{ state.unit }}</div>
          </div>
          <div
            class="figure-value"
            :style="{
              'font-size': state.fontSize + 'px',
              color: state.fontColor,
              'border-top': '1px solid ' + state.fontColor,
              height: state.edge_b / 2 + 'px',
            }"
          >
            <span class="figure-value-number">{{ state.value }}</span>
          </div>
        </div>
      </div>
      <div class="flex-row v-figure-footer" v-if="slotFooter">
        <slot name="footer"></slot>
      </div>
    </div>
  </FigureCard>
</template>
<script setup>
  import { useSlots, reactive, onMounted, watch, nextTick } from 'vue'
  import { VIcon } from '@v-model/shared--modules'
  import FigureCard from './FigureCard.vue'

  //判断<slot name="footer"/>是否有传值
  const slotFooter = !!useSlots().footer

  const props = defineProps({
    width: {
      type: [String],
      default: () => '100%',
    },
    height: {
      type: [String],
      default: () => '100%',
    },
    style: {
      type: [Object, String],
      default: () => {},
    },
    fontSize: {
      //图标大小、数字大小
      type: [String, Number],
      default: () => 24,
    },
    fontColor: {
      type: [String],
      default: () => '#000',
    },
    label: {
      type: [String],
      default: () => '',
    },
    value: {
      type: [String, Number],
      default: () => '0000',
    },
    unit: {
      type: [String],
      default: () => '',
    },
    icon: {
      type: [String],
      default: () => 'el#Histogram',
    },
  })

  const state = reactive({
    label: props.label,
    value: props.value,
    unit: props.unit,
    icon: props.icon,
    width: props.width,
    height: props.height,
    style: props.style,
    fontSize: props.fontSize,
    fontColor: props.fontColor,
    edge_a: 0,
    edge_b: 0,
    edge_c: 0,
    rectangle_w: '0px',
    rectangle_h: '0px',
    hexagon_w: '0px',
    hexagon_h: '0px',
  })
  watch(
    () => props,
    (newVal, oldVal) => {
      init()
    },
    { deep: true }
  )
  const findHypotenuse = (base, perpendicular) => {
    const bSquare = base ** 2
    const pSquare = perpendicular ** 2
    const sum = bSquare + pSquare
    const hypotenuse = Math.sqrt(sum).toFixed(6)
    return hypotenuse
  }
  const initModel = function () {
    state.label = props.label
    state.value = props.value
    state.unit = props.unit
    state.icon = props.icon
    state.width = props.width
    state.height = props.height
    state.style = props.style
    state.fontSize = props.fontSize
    state.fontColor = props.fontColor
  }
  const init = function () {
    initModel()
    //通过图标的大小计算容器规格
    //直角边
    state.edge_a = parseFloat(props.fontSize)
    //直角边
    state.edge_b = parseFloat(props.fontSize) * 1.732051
    //斜边长
    state.edge_c = findHypotenuse(state.edge_a, state.edge_b)

    //长方形
    state.rectangle_w = state.edge_a + 'px'
    state.rectangle_h = state.edge_b + 'px'

    state.hexagon_w = state.edge_c + 'px'
    state.hexagon_h = state.edge_b + 'px'
  }

  onMounted(() => {
    init()
  })
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .v-figure-content {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .hexagon-icon-content {
    position: relative;
    width: v-bind('state.hexagon_w');
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .hexagon-icon-box1,
  .hexagon-icon-box2,
  .hexagon-icon-box3 {
    width: v-bind('state.rectangle_w');
    height: v-bind('state.rectangle_h');
    overflow: hidden;
    //border-top: 0.5px solid #F2F6FC;
    //border-bottom: 0.5px solid #F2F6FC;
  }

  .hexagon-icon-box1 {
    z-index: 3;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .hexagon-icon-box2 {
    z-index: 2;
    position: absolute;
    transform: translate(-50%, -50%);
    transform: rotate(60deg);
  }

  .hexagon-icon-box3 {
    z-index: 1;
    position: absolute;
    transform: translate(-50%, -50%);
    transform: rotate(300deg);
  }
  .hexagon-icon {
    width: 32px;
    height: 32px;
    color: #fff;
    z-index: 4;
  }

  .figure-label-bar {
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  .figure-label {
    height: 100%;
    font-size: var(--v-base-font-size);
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
  }
  .figure-unit {
    height: 100%;
    font-size: 10px;
    justify-content: flex-end;
    align-items: center;
    color: v-bind('state.fontColor');
  }
  .figure-value {
    width: 100%;
    text-align: left;
    position: relative;
  }
  .figure-value-number {
    font-family: electronicFont;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0;
  }
  .v-figure-footer {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    flex-wrap: wrap;
    height: 20px;
    width: 100%;
    border-top: 0.5px solid #dcdfe6;
    justify-content: flex-start;
    align-items: center;
  }
</style>
